<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>OA模拟与实现</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/authoruty.css}"/>
    <link rel="stylesheet" th:href="@{/css/file.css}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    
<style>
  #txtContent{
      width: 400px;
      height: 130px;
  }
  .type{
      display: none;
      /* display: inline-block; */
  }
    #txtContent{
        width: 500px;
        height:200px;
    }
</style>
</head>
<body>
    <div class="container-fluid">
        <ol class="breadcrumb nav-top">
            <li><a th:href="@{~/router/index.html}" target="main">首页</a></li>
            <li class="active">消息发送</li>
        </ol>
        <div class="panel panel-info">
            <div class="panel-heading">消息发送</div>
            <div class="panel-body texteare">
                <form action="/message/sendMessage" method="post" class="form-inline align-self-center">
                    <div id="test-editor">
                        <label for="txtContent">请输入内容：</label><br>
                        <textarea name="mcontent" id="txtContent"></textarea>
                    </div>
                    <div class="" id="redio">
                        <label class="type1">发送方式：</label>
                        <label for="type1"><span>群发</span></label>
                        <input type="radio" value="群发" name="mtype" id="type1">&nbsp;
                        <label for="type2" ><span>私发</span></label>
                        <input type="radio" checked value="私发" name="mtype" id="type2">
                    </div>
                    <div class="sendtype">
                        <label><span>选择接收人：</span></label>
                        <select name="mreciverpos" class="type recive_1" id="typ_1">
                            <option>--请选择接收人群--</option>
                            <option value="2">讲师</option>
                            <option value="3">辅导员</option>
                        </select>
                        <input type="hidden" name="mreciverposname" value="" id="mreciverposname">
                        <!-- 二选择一 -->
                        <select name="mreciverid" class="type recive_2" id="typ_2">
                            <option>--请选择接收人--</option>
                            <option name="mreciverid" th:each="people : ${people}" th:value="${people.oid}" th:text="${people.oname}"></option>
                        </select>
                        <input type="hidden" name="mrecivername" value="" id="mrecivername">
                    <span id="msg"></span>
                    </div>
                    <div class="">
                        <div class="">
                            <button type="submit" class="btn btn-info">发送</button>
                            <a href="/message/sendmessage.html" class="btn btn-info">返回</a>
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
        
    </div>
    <script>
        $(function(){
            // layui.use('layedit', function(){
            //     var layedit = layui.layedit;
            //     layedit.build('txtContent',{
            //         height: 150 ,//设置编辑器高度
            //         tool: ['left', 'center', 'right', '|','strong' ,'italic']
            //     });
            // });
            var c = $("#redio input[name='mtype']:checked").val();
            init(c);
            $("input[name='mtype']").click(function(){
                init($(this).val());
            })
            function init(c){
                console.log(c)
                if(c=='群发'){
                    $(".recive_2").hide();
                    $(".recive_2").attr("disabled","disabled");
                    $(".recive_1").removeAttr("disabled");
                    $(".recive_1").show();
                }else if(c=='私发'){

                    $(".recive_1").hide();
                    $(".recive_1").attr("disabled","disabled");
                    $(".recive_2").removeAttr("disabled");
                    $(".recive_2").show();
                }
            };
            //选择接收人群
            $("#typ_1").click(function () {
                $("#mrecivername").val("");
                $("#mreciverposname").val("");
                $("#msg").text("");
                var name = $("#typ_1 option:selected").text();
                $("#mreciverposname").val(name);
            })
        //    请选择接收人
            $("#typ_2").click(function(){

                $("#mreciverposname").val("");
                $("#mrecivername").val("");
                $("#msg").text("");
                var name = $("#typ_2 option:selected").text();
                console.log($(this).val()+' ** '+name);
                $("#mrecivername").val(name);
            })

            $(".form-inline").submit(function(){
                if($("input[name='mtype']:checked").val()=='私发'){
                    if($("#typ_2").val()=='--请选择接收人--'){
                        $("#msg").css("color","red").text("请选择接收人");
                        return false;
                    }
                }else{
                    if($("#typ_1").val()=='--请选择接收人群--'){
                        $("#msg").css("color","red").text("请选择接收人群");
                        return false;
                    }
                }

                if($("#txtContent").val()==''||$("#txtContent").val().length<5){
                    $("#txtContent").css({"border":"red 1px solid","box-shadow":"red .5px .5px 5px"})
                    return false;
                }
                $("#txtContent").focus(function(){
                    $(this).css({"border":"","box-shadow":""});
                })

            })


        })
        
        
    </script>

</body>
</html>